<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信企业号-应用消息推送</title>
    <link rel="stylesheet" href="/css/zui.min.css">
    <link href="lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
</head>
<body>
[#if status??]
<div>
    <h4>${error_message}</h4>
</div>
[#else]
<div class="container-fixed-md">
    <ol class="breadcrumb" style="margin-top: 15px;margin-bottom: 0px;">
        <li><a href="/"><i class="icon icon-home"></i> 首页</a></li>
        <li class="active">应用消息</li>
    </ol>
    <hr style="margin-top: 0px; margin-bottom: 0px;">
</div>
<div class="container-fixed-md">
    <div class="row" style="margin-top: 20px">
        <div class="col-xs-3">
            <ul class="nav nav-tabs nav-stacked">
                <li[#if (msgtype!'text') == 'text'] class="active"[/#if]><a href="###" data-target="#tab3Content1" data-toggle="tab"> 文本消息</a></li>
                <li[#if (msgtype!'text') == 'image'] class="active"[/#if]><a href="###" data-target="#tab3Content2" data-toggle="tab"> 图片信息</a></li>
                <li[#if (msgtype!'text') == 'voice'] class="active"[/#if]><a href="###" data-target="#tab3Content3" data-toggle="tab"> 语音信息</a></li>
                <li[#if (msgtype!'text') == 'video'] class="active"[/#if]><a href="###" data-target="#tab3Content4" data-toggle="tab"> 视频消息</a></li>
                <li[#if (msgtype!'text') == 'file'] class="active"[/#if]><a href="###" data-target="#tab3Content5" data-toggle="tab"> 文件消息</a></li>
                <li[#if (msgtype!'text') == 'textcard'] class="active"[/#if]><a href="###" data-target="#tab3Content6" data-toggle="tab"> 文本卡片消息</a></li>
                <li[#if (msgtype!'text') == 'news'] class="active"[/#if]><a href="###" data-target="#tab3Content7" data-toggle="tab"> 图文消息</a></li>
                <li[#if (msgtype!'text') == 'mpnews'] class="active"[/#if]><a href="###" data-target="#tab3Content8" data-toggle="tab"> 图文消息（mpnews）</a></li>
                <li[#if (msgtype!'text') == 'miniprogram_notice'] class="active"[/#if]><a href="###" data-target="#tab3Content9" data-toggle="tab"> 小程序通知消息</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <div class="tab-content col-xs-9">
                <div class="tab-pane fade[#if (msgtype!'text') == 'text'] active in[/#if]" id="tab3Content1">
                    <!-- 文本消息 -->
                    <form class="form-horizontal" style="margin-top: 20px;" id="text-message-form">
                        <div class="form-group">
                            <label for="touser" class="col-sm-2">成员列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="touser" name="touser"
                                       placeholder="消息接收者，最多支持1000个" value="${(text_template.touser)!''}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="toparty" class="col-sm-2">部门列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="toparty" name="toparty"
                                       placeholder="消息接收部门，最多支持100个，成员列表为@all时忽略本参数"
                                       value="${(text_template.toparty)!''}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="totag" class="col-sm-2">标签列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="totag" name="totag"
                                       placeholder="消息接收标签，最多支持100个，成员列表为@all时忽略本参数"
                                       value="${(text_template.totag)!''}">
                            </div>
                        </div>
                        <input type="hidden" id="msgtype" name="msgtype" value="text">
                        <input type="hidden" id="agentid" name="agentid" value="${agent.agentId}">
                        <div class="form-group">
                            <label for="text.content" class="col-sm-2 required">消息内容</label>
                            <div class="col-md-10 col-sm-10">
                                <textarea class="form-control" rows="3" id="text.content" name="text.content"
                                          placeholder="最长不超过2048个字节">${(text_template.text.content)!''}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="safe" class="col-sm-2">保密消息</label>
                            <div class="col-md-6 col-sm-10">
                                <div class="switch">
                                    <input type="checkbox" class="form-control" id="safe" name="safe" [#if ((text_template.safe)!0) == 1]checked="checked"[/#if]>
                                    <label>否是保密</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="text-message-to_schedule" class="col-sm-2">定时任务</label>
                            <div class="col-md-6 col-sm-10">
                                <div class="switch">
                                    <input type="checkbox" class="form-control to_schedule" id="text-message-to_schedule"
                                           data-target=".text-message-schedule" [#if text_scheduleJob??]checked="checked"[/#if]>
                                    <label>是否开启</label>
                                </div>
                            </div>
                        </div>
                        <div class="[#if !text_scheduleJob??]hide[/#if] text-message-schedule">
                            <input type="hidden" name="schedule.clazz" value="${(text_scheduleJob.clazz)!'com.wangxiaonan.wxwork.quartz.DailyTextMessageJob'}">
                            <input type="hidden" name="schedule.type" value="${(text_scheduleJob.type)!1}">
                            <input type="hidden" name="schedule.group" value="${agent.agentId}">
                            <div class="form-group">
                                <label for="text-message-scheduleName" class="col-sm-2 required">任务名称</label>
                                <div class="col-md-10 col-sm-10">
                                    <input type="text" class="form-control" id="text-message-scheduleName" name="schedule.name"
                                           placeholder="" value="${(text_scheduleJob.name)!''}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="text-message-scheduleDescription" class="col-sm-2">任务描述</label>
                                <div class="col-md-10 col-sm-10">
                                    <input type="text" class="form-control" id="text-message-scheduleDescription" name="schedule.description"
                                           placeholder="" value="${(text_scheduleJob.description)!''}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="text-message-startDate" class="col-sm-2">开始时间</label>
                                <div class="col-md-10 col-sm-10">
                                    <input type="text" class="form-control form-datetime" id="text-message-startDate" name="schedule.startDate"
                                           placeholder="请选择任务开始时间" value="${(text_scheduleJob.startDate?string('yyyy-MM-dd hh:mm'))!''}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="text-message-endDate" class="col-sm-2">结束时间</label>
                                <div class="col-md-10 col-sm-10">
                                    <input type="text" class="form-control form-datetime" id="text-message-endDate" name="schedule.endDate"
                                           placeholder="请选择任务结束时间" value="${(text_scheduleJob.endDate?string('yyyy-MM-dd hh:mm'))!''}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="text-message-cron" class="col-sm-2 required">定时条件</label>
                                <div class="col-md-10 col-sm-10">
                                    <input type="text" class="form-control" id="text-message-cron" name="schedule.cronExpression"
                                           placeholder="cron表达式" value="${(text_scheduleJob.cronExpression)!''}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="text-message-delay" class="col-sm-2">延迟时间</label>
                                <div class="col-md-10 col-sm-10">
                                    <input type="text" class="form-control" id="text-message-delay" name="schedule.startDelay"
                                           placeholder="首次启动延迟执行时间(毫秒)，和开始时间不能同时使用" value="${(text_scheduleJob.startDelay?c)!''}">
                                </div>
                            </div>
                        </div>
                        [#if text_template_id?? && ((text_scheduleJob.id)!0) > 0]
                        <input type="hidden" name="schedule.template_id" value="${text_template_id}">
                        <input type="hidden" name="schedule.id" value="${(text_scheduleJob.id)!''}">
                        [/#if]
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-5">
                                <button id="text-message-btn" type="button" class="btn btn-primary">发送</button>
                            </div>
                            <div class="col-sm-5 text-message-schedule[#if !(msgtype??)] hide[/#if]">
                                <button id="text-message-save-schedule-btn" type="button" class="pull-right btn btn-success"[#if msgtype??]
                                data-type="PUT"[/#if]>
                                    [#if msgtype??]更新并重启[#else]保存并执行[/#if]
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'image'] active in[/#if]" id="tab3Content2">
                    <p> 图片信息 </p>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'voice'] active in[/#if]" id="tab3Content3">
                    <p> 语音信息 </p>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'video'] active in[/#if]" id="tab3Content4">
                    <p> 视频消息 </p>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'file'] active in[/#if]" id="tab3Content5">
                    <p> 文件消息 </p>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'textcard'] active in[/#if]" id="tab3Content6">
                    <!-- 文本卡片信息 -->
                    <form class="form-horizontal" style="margin-top: 20px;" id="textcard-message-form">
                        <div class="form-group">
                            <label for="textcard-touser" class="col-sm-2">成员列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard-touser" name="touser"
                                       placeholder="消息接收者，最多支持1000个">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard-toparty" class="col-sm-2">部门列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard-toparty" name="toparty"
                                       placeholder="消息接收部门，最多支持100个，成员列表为@all时忽略本参数">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard-totag" class="col-sm-2">标签列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard-totag" name="totag"
                                       placeholder="消息接收标签，最多支持100个，成员列表为@all时忽略本参数">
                            </div>
                        </div>
                        <input type="hidden" name="msgtype" value="textcard">
                        <input type="hidden" name="agentid" value="${agent.agentId}">
                        <div class="form-group">
                            <label for="textcard.title-1" class="col-sm-2">标题</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard.title-1" name="textcard.title"
                                       placeholder="不超过128个字节，超过会自动截断">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard.description-1" class="col-sm-2">描述</label>
                            <div class="col-md-10 col-sm-10">
                                <textarea class="form-control" id="textcard.description-1" name="textcard.description"
                                          placeholder="不超过512个字节，超过会自动截断"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard.url-1" class="col-sm-2">跳转连接</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard.url-1" name="textcard.url"
                                       placeholder="点击后跳转的链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textcard.btntxt-1" class="col-sm-2">按钮文字</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="textcard.btntxt-1" name="textcard.btntxt"
                                       placeholder="仅在图文数为1条时才生效。 默认为“阅读全文”， 不超过4个文字">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="textcard-message-btn" type="button" class="btn btn-primary">发送</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'news'] active in[/#if]" id="tab3Content7">
                    <!-- 图文消息 -->
                    <form class="form-horizontal" style="margin-top: 20px;" id="news-message-form">
                        <div class="form-group">
                            <label for="news-touser" class="col-sm-2">成员列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news-touser" name="touser"
                                       placeholder="消息接收者，最多支持1000个">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news-toparty" class="col-sm-2">部门列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news-toparty" name="toparty"
                                       placeholder="消息接收部门，最多支持100个，成员列表为@all时忽略本参数">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news-totag" class="col-sm-2">标签列表</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news-totag" name="totag"
                                       placeholder="消息接收标签，最多支持100个，成员列表为@all时忽略本参数">
                            </div>
                        </div>
                        <input type="hidden" name="msgtype" value="news">
                        <input type="hidden" name="agentid" value="${agent.agentId}">
                        <div class="form-group">
                            <label for="news.articles.title-1" class="col-sm-2">标题</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.title-1" name="atc.title"
                                       placeholder="不超过128个字节，超过会自动截断">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.description-1" class="col-sm-2">描述</label>
                            <div class="col-md-10 col-sm-10">
                                <textarea class="form-control" id="news.articles.description-1" name="atc.description"
                                          placeholder="不超过512个字节，超过会自动截断"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.url-1" class="col-sm-2">跳转连接</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.url-1" name="atc.url"
                                       placeholder="点击后跳转的链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.picurl-1" class="col-sm-2">消息图片</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.picurl-1" name="atc.picurl"
                                       placeholder="图文消息的图片链接，支持JPG、PNG格式，较好的效果为大图640*320，小图80*80">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="news.articles.btntxt-1" class="col-sm-2">按钮文字</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="text" class="form-control" id="news.articles.btntxt-1" name="atc.btntxt"
                                       placeholder="仅在图文数为1条时才生效。 默认为“阅读全文”， 不超过4个文字">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="news-message-btn" type="button" class="btn btn-primary">发送</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'mpnews'] active in[/#if]" id="tab3Content8">
                    <p> 图文消息（mpnews） </p>
                </div>
                <div class="tab-pane fade[#if (msgtype!'text') == 'miniprogram_notice'] active in[/#if]" id="tab3Content9">
                    <p> 小程序通知消息 </p>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/js/jquery1.8.1.js"></script>
<script src="/js/zui.min.js"></script>
<script src="lib/datetimepicker/datetimepicker.min.js"></script>
<script type="text/javascript">
    // 序列化JSON字符串
    $.fn.serializeObject = function () {
        let o = {};
        let a = this.serializeArray();
        $.each(a, function () {
            let value = this.value;
            let chain = this.name.split(".");
            let c = o;
            $.each(chain, function (i, e) {
                if (i === (chain.length - 1)) {
                    if (c[e]) {
                        if (!c[e].push) {
                            c[e] = [c[e]];
                        }
                        c[e].push(value || '');
                    } else {
                        c[e] = value || '';
                    }
                } else {
                    if (!c[e]) {
                        c[e] = {};
                    }
                }
                c = o[e];
            });
        });
        return o;
    };

    // 激活定时任务
    $('.to_schedule').on('click', function () {
        var el = $(this);
        if (el.is(':checked')) {
            $(el.data('target')).show();
        } else {
            $(el.data('target')).hide();
        }
    });

    // 选择时间和日期
    $(".form-datetime").datetimepicker({
        language:  "zh-CN",
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format: "yyyy-mm-dd hh:ii"
    });

    var agent_id = '${agent.agentId}';
    var sendMessage = function (msg, url, callback, type) {
        if (agent_id == null || agent_id == '' || agent_id == undefined) {
            alert("应用ID不能为空");
            return false;
        }
        url = url || ('/message?agent_id=' + agent_id);
        type = type || 'POST';
        $.ajax({
            url: url,
            type: type,
            dataType: 'json',
            contentType:"application/json",
            data: msg,
            beforeSend: function () {
                console.log(agent_id + ' start send message');
            },
            success: function (result) {
                console.log(result);
                if (result.status === 'ok') {
                    if(callback){
                        callback();
                    } else {
                        new $.zui.Messager('  提示消息：成功!', {
                            type: 'success',
                            time: 3000
                        }).show();
                    }
                } else {
                    new $.zui.Messager('  提示消息：' + result.status + '!', {
                        type: 'danger',
                        time: 3000
                    }).show();
                }
            },
            error: function () {
                new $.zui.Messager('  提示消息：请求失败!', {
                    type: 'danger',
                    time: 5000
                }).show();
            },
            complete: function () {

            }
        });
    };

    $('#text-message-btn').on('click', function () {
        var form = $('#text-message-form').serializeObject();
        if ($('#safe').is(':checked')) {
            form.safe = 1;
        } else {
            form.safe = 0;
        }
        delete form.schedule;
        console.log(form);
        sendMessage(JSON.stringify(form));
    });
    $('#text-message-save-schedule-btn').on('click', function () {
        var form = $('#text-message-form').serializeObject();
        if ($('#safe').is(':checked')) {
            form.safe = 1;
        } else {
            form.safe = 0;
        }
        console.log(form);
        console.log($(this).data('type'));
        var url = '/schedule?agent_id=' + agent_id;
        sendMessage(JSON.stringify(form), url, function () {
            window.location.href='/timer-task?agent_id=' + agent_id;
        }, $(this).data('type'));
    });
    $('#textcard-message-btn').on('click', function () {
        var form = $('#textcard-message-form').serializeObject();
        console.log(form);
        sendMessage(JSON.stringify(form));
    });
    $('#news-message-btn').on('click', function () {
        var form = $('#news-message-form').serializeObject();
        var articles = [];
        var news = {};
        articles.push(form.atc);
        news.articles = articles;
        form.news = news;
        delete form.atc;
        console.log(form);
        sendMessage(JSON.stringify(form));
    });
</script>
[/#if]
</body>
</html>